const path=require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin} = require("clean-webpack-plugin")

/** 
 * Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件：
 * Vue Loader v15 现在需要配合一个 webpack 插件(VueLoaderPlugin)才能正确使用：
 * 使用版本v14.18.1的node  lockfileVersion为1 运行报错Cannot find module 'vue/compiler-sfc'(vue-loder的版本是17)
*/
const { VueLoaderPlugin } = require('vue-loader')
module.exports={
    devServer:{
      static:"./dist",
      compress:true,//生成的js是否被压缩
      port:8080
      /** 
       * webpack-dev-server： 是一个本地开发服务器，会自动监听变化，自动打包构建，自动更新刷新浏览器
       * 不会产生dist文件，将打包结果暂时存在内存中，内部的http-sever访问这些文件并读取数据，发送给浏览器
       * 在webpack.config.js文件中，通过属性devServer: { } 设置与 webpack-dev-server相关的配置
      */
    },
    entry:{
      main:"./index.js",
      WebGL:"./WebGL/index.js"
    },
    output: {
        filename:"[name].js",
        path:path.resolve(__dirname,'dist'),
        environment: {
          arrowFunction :false//webpack打包时不使用箭头函数，兼容低版本浏览器
        }
    },
    plugins: [
      /** 
       * CleanWebpackPlugin插件在每次构建前清理 output中的path文件目录，
      */
       new CleanWebpackPlugin(),

      new HtmlWebpackPlugin({
        /**
         * 创建的html的默认输出路径是output里的path路径
         * 执行webpack打包命令，在 ./dist 文件夹下会生成，main.js和index.html两个文件，index.html文件引入了main.js文件。
         */
        title:"custom template",
        template:"index.html",
        inject:"body",  //inject：有4个值: true | 'head' | 'body' | false
        chunks:["main"],
        minify:{ //压缩HTML文件
          removeComments:false,//移除HTML中的注释
          collapseWhitespace:false //删除空白符与换行符
        }
      }),

      new HtmlWebpackPlugin({
        title:"custom template",
        filename:"webgl.html",
        template:"./WebGL/index.html",
        inject:"body",  //inject：有4个值: true | 'head' | 'body' | false
        chunks:["WebGL"]
      }),


     
      new VueLoaderPlugin()
    ],
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: [".ts", ".tsx", ".js" ,".vue"],
        // Add support for TypeScripts fully qualified ESM imports.
        // extensionAlias: {
        //     ".js": [".js", ".ts" ,"zt"], 
        //     ".cjs": [".cjs", ".cts"],
        //     ".mjs": [".mjs", ".mts"]
        // }
   
    },
    module: {
        rules: [
          // all files with a `.ts`, `.cts`, `.mts` or `.tsx` extension will be handled by `ts-loader`
          { 
            test: /\.([cm]?ts|tsx)$/, 
             loader: "ts-loader",
             options: {
              /**
               * 单文件组件会被vue-loader解析成三个部分，script部分最终交给ts-loader去处理,tsc不知道如何处理.vue文件结尾的文件 会报错
               */
              appendTsSuffixTo: [/.vue$/],
             }
          },
          /**
           * vue-loader可以解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理
           */
          { test: /\.vue$/, loader: "vue-loader" },//UseEntry
          /**
           * use: [ 'style-loader' ]）是 loader 属性的简写方式（如：use: [ { loader: 'style-loader'} ]
           * 从右到左被应用（从下到上被应用）
           */
          { test: /\.css$/, use:
             [
              /**
               * 经过css-loader的转译，我们已经得到了完整的css样式代码，style-loader的作用就是将结果以style标签的方式插入DOM树中。
               * vue-style-loader是基于style-loader开发的，vue项目上使用vue-style-loader
               */
              "vue-style-loader",
              /**
               * 如果在JS中导入了css，那么就需要使用 css-loader 来识别这个模块，通过特定的语法规则进行转换内容最后导出(?)
               * css-loader会像import / require()一样解释css中的 @import 和 url() 代码并将解析它们。
               */
              "css-loader",
                // {
                //   loader:"css-loader"
                // }
             ]},
             { test: /\.less$/, use:
             [
              /**
               * 经过css-loader的转译，我们已经得到了完整的css样式代码，style-loader的作用就是将结果以style标签的方式插入DOM树中。
               * vue-style-loader是基于style-loader开发的，vue项目上使用vue-style-loader
               */
              "vue-style-loader",
              /**
               * 如果在JS中导入了css，那么就需要使用 css-loader 来识别这个模块，通过特定的语法规则进行转换内容最后导出(?)
               * css-loader会像import / require()一样解释css中的 @import 和 url() 代码并将解析它们。
               */
              "css-loader",
              "less-loader"
                // {
                //   loader:"css-loader"
                // }
             ]},
          // webpack指南 资源模块
          { 
            test:/\.png$/,
            type:"asset/resource",
            generator:{
              // 这个路径是相对于webpack的出口路径
              publicPath: 'http://localhost:8080/cdn-assets/',
              outputPath:"cdn-assets/"
            }
          },

          /** 
           * 配置eslint来校验运行的时候代码错误
           * 只有匹配vue文件才能使用eslint校验vue文件
           */
          /* 加载 eslint 语法检查*/
          // {
          //   test:/\.(js|vue)$/,
          //   /* 只检查自己的源代码，不检查第三方库 */
          //   exclude:/node_modules/,
          //   // loader:'eslint-loader',
          //   options:{
          //       /* 自动修复不符合eslint的规则 */
          //       // fix:true
          //   }
          // }
        ]
    },
    devtool:"cheap-module-source-map",//建议只在开发测试环境引入map,防止源代码出现被解析问题
    mode: "development"
}